﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<link rel="stylesheet" href="../webjars/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../webjars/css/global.css" media="all">
	</head>

	<body>
		<div class="admin-main">
			<form action="" class="layui-form" method="post">
              <div class="layui-inline">
                <select name="env" asnycSelect="../admin/profile/options" lay-filter="env_select" lay-verify="required">
                  <option value="">请选择环境</option>
                </select>     
              </div>
              <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal J_search" lay-submit lay-filter="search" value="查询"/>    
              </div>                           
           </form>
    
			<fieldset class="layui-elem-field">
				<legend>应用节点列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th width="160">应用</th>
								<th width="50">环境</th>
								<th width="*">节点ID</th>
								<th width="100">ip地址</th>
								<th width="50">端口</th>
								<th width="70">springboot</th>
								<th width="150">心跳时间</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody id="content"></tbody>
					</table>
				</div>
			</fieldset>
		</div>
		<!--模板-->
		<script type="text/html" id="list_tpl">
			{{# layui.each(d.data, function(index, item){ }}
			<tr>
				<td>{{ item.appName }}</td>
				<td>{{ item.env }}</td>
				<td>{{ item.nodeId }}</td>
                <td>{{ item.serverip }}</td>
                <td>{{ item.serverport }}</td>
                <td>{{ item.springboot ? '是' : '否' }}</td>
                <td>{{ item.syncTime }}</td>
				<td data-appName="{{ item.appName }}" data-env="{{ item.env }}" data-nodeId="{{ item.nodeId }}">
					<button class="layui-btn layui-btn-danger layui-btn-sm J_view_config">查看配置</button>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="../webjars/plugins/layui/layui.js"></script>
        <script type="text/javascript" src="../webjars/js/jeesuitelayui.js?v20180420"></script>
        <script type="text/javascript">
          layui.use(['layer','laytpl', 'form'], function(){
        	  var $ = layui.jquery,laytpl = layui.laytpl,form = layui.form();  
        	  $("#content").on('click',".J_view_config",function() {
        		  var $pa = $(this).parent(),appName = $pa.attr('data-appName'),
        		       env = $pa.attr('data-env'),nodeId = $pa.attr('data-nodeId');
        		  var url = "../monitor/app/config/" + env + "/" + appName + "?nodeId=" + nodeId;
        		  $.getJSON(url,function(data){
        			  if(data.code==200){
        				  parent.layer.open({
              		        type: 1
              		        ,title: false 
              		        ,closeBtn: false
              		        ,area: ['900px', '500px']
              		        ,shade: 0.8
              		        ,id: 'layer_view_content' 
              		        ,btn: ['关闭']
              		        ,moveType: 1 
              		        ,content:data.data
              		        ,success: function(layero){
              		          var btn = layero.find('.layui-layer-btn');
              		          btn.css('text-align', 'center');
              		        }
              		      });
				          }else{
				        	  layer.msg(data.msg, {icon: 5}); 
				          }
        		  });
        	  });
        	  
        	  form.on('submit(search)',function(data){
					var loading = layer.load();
					$.getJSON('../monitor/app/' + data.field.env,function(data){
						layer.close(loading);
						if(data.code==200){
				        	var tpl = $('#list_tpl').html();
							laytpl(tpl).render(data, function(html){
								$("#content").html(html);
							});
				          }else{
				        	  layer.msg(data.msg, {
									icon: 5
							  }); 
				          }
					});
					return false;
				});
          });
        </script>
	</body>

</html>